<template>
    <div>
        <Card>
            <Row>
                部门名字:<Input placeholder="" style="width: 150px;margin-left: 10px;margin-right: 20px"/>
                <Button type="primary" shape="circle" icon="ios-search">搜索</Button>
            </Row>
            <br>
            <Row>
                <Button type="primary" icon="plus" @click="addDeptUI">新建</Button>
                <Button type="success" icon="wrench" @click="editDeptUI">修改</Button>
                <Button type="error" icon="trash-a" @click="deleteDept">删除</Button>
            </Row>
            <br>
            <Row>
                <Table border ref="selection" :columns="columns3"  :data="data3" @on-selection-change="changeIds">
                </Table>
            </Row>
            <br>
            <Row>
                <Page show-elevator align="center" :total="total" :current="pageNo" :page-size="pageSize"
                      @on-change="gopage"></Page>
            </Row>

            <!--"添加部门"模式对话框 -->
            <Modal
                    v-model="addModal"
                    title="新建部门"
                    :mask-closable="false"
                    @on-ok="addDept"
                    @on-cancel="cancel"
                    :loading="loading"
            >
                <Form ref="addForm" :model="addForm" :rules="ruleValidate" :label-width="100">
                    <FormItem label="部门名字" prop="deptName">
                        <Input v-model="addForm.deptName" placeholder="请输入部门名"></Input>
                    </FormItem>
                    <FormItem label="父部门" prop="parentId">
                        <Select v-model="addForm.parentId" placeholder="请选择父部门">
                            <Option v-for="dept in deptList" :value="dept.id">{{dept.deptName}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="状态" prop="state">
                        <RadioGroup v-model="addForm.state">
                            <Radio label="1">可用</Radio>
                            <Radio label="0">不可用</Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
            </Modal>

            <!--"编辑部门"模式对话框 -->
            <Modal
                    v-model="editModal"
                    title="编辑部门"
                    :mask-closable="false"
                    @on-ok="editDept"
                    @on-cancel="cancel"
                    :loading="loading"
            >
                <Form ref="editForm" :model="editForm" :rules="ruleValidate" :label-width="100">
                    <FormItem label="部门名字" prop="deptName">
                        <Input v-model="editForm.deptName"></Input>
                    </FormItem>
                    <FormItem label="父部门" prop="parentId">
                        <Select v-model="editForm.parentId" placeholder="请选择父部门">
                            <Option v-for="dept in deptList" :value="dept.id">{{dept.deptName}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="状态" prop="state">
                        <RadioGroup v-model="editForm.state">
                            <Radio label="1">可用</Radio>
                            <Radio label="0">不可用</Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
            </Modal>

        </Card>
    </div>


</template>

<script>
    //要进行ajax的fetch函数提交, 要先导入对应的js文件
    import fetch from '../../utils/fetch';

    export default {
        data () {
            return {
                columns3:[
                    {
                        type:'selection',
                        width:60,
                        align:'center'
                    },
                    {
                        title:'部门名字',
                        key:'deptName'   //key的值代表获取后台会写的json对象的属性名, 比如后台查询回来的部门(Dept)里有个属性: 部门名(deptName)
                    },
                    {
                        title:'状态',
                        key:'state',
                        render: (h, params) => {
                            //h :用来画标签   <div><strong>可用</strong></div>
                            //params:可用用来获取 row  column index
                            return h('div', [
                                h('strong', params.row.state == 1 ? '可用' : '不可用')
                            ]);
                        }
                    }
                ],
                //当前页的部门对象集合
                data3:[],
                pageNo:1,
                pageSize:3,
                total:0,

                //控制"添加部门"模式对话框的显示
                addModal:false,   //初始隐藏
                // 控制"编辑修改部门"模式对话框的显示
                editModal:false,   //初始隐藏
                //所有父部门列表
                deptList:[],

                //"添加部门"的数据模型
                addForm:{
                    deptName:'',
                    parentId:null,
                    state:1
                },
                //"编辑修改部门"的数据模型
                editForm:{
                    id:'',
                    deptName:'',
                    parentId:null,
                    state:1
                },

                //记录选中部门的id集合(单选-对应的"修改"或"单个删除部门"功能,  多选-对应的"批量删除"部门功能)
                ids:[],

                //表单的校验器
                ruleValidate:{
                    deptName:[
                        {required:true,message:'部门名不能为空!', trigger:'blur'}
                    ]
                },
                loading:true
            };
        },
        methods: {
            gopage:function (pageNo) {
                //alert('即将加载第'+pageNo+'页');
                this.pageNo = pageNo;
                //之前的axios提交要更换为fetch提交
                fetch({
                    url:"/system/dept/list",//?access_token=1fc6ad57-2e88-4615-afcc-35abaa63da1d",//+Cookies.get("access_token"),
                    method:'get',
                    params:{
                        pageNo:this.pageNo,
                        pageSize: this.pageSize
                    }
                }).then((resp)=>{
                    this.data3 = resp.data.list;
                    this.total = resp.data.totalCount;
                });
            },
            addDeptUI:function () {
                this.addModal=true;
                fetch({
                    url:'/system/dept/all',
                    method: 'get'
                }).then((resp)=>{
                    this.deptList=resp.data;
                });
            },
            addDept:function () {
                this.$refs['addForm'].validate((valid)=>{
                    if(valid){
                        //alert('数据校验通过,即将新增...');
                        fetch({
                            url:'/system/dept',
                            method:'post',
                            data:this.addForm
                        }).then((resp)=>{
                            if(resp.data=='1'){
                                this.$Message.success('新建部门成功!');
                                //新建部门成功后,要重新获取最新的分页数据
                                this.gopage(this.pageNo);
                                //手动关闭新增对话框
                                this.addModal=false;
                            }
                            else{
                                this.$Message.error('新建部门失败!');
                            }
                        });
                    }
                    else{
                        //用iView的提示框报错
                        this.$Message.error('表单校验失败!');

                        setTimeout(()=>{
                            this.loading=false;  //不要加载了

                            //当dom刷新后,让loading重新变为true, 再给我显示出来
                            this.$nextTick(()=>{
                                this.loading=true;
                            });
                        },2000);
                    }
                });
            },

            /**
             *  获取当前选中的部门复选框事件
             */
            changeIds:function (selection) {
                //先清空之前选中的ids
                this.ids=[];
                for(let i=0;i<selection.length;i++){
                    this.ids.push(selection[i].id);
                }
                //当单选时, selection[0]就是你单选的部门, 要将它赋值给editForm
                if(selection.length==1){
                    this.editForm=selection[0];
                }
                /*this.$Message.success('你选中的部门id = ' + selection[0].id);
                this.$Message.info('你选中的editForm.deptName = ' + this.editForm.deptName);*/
            },

            editDeptUI:function () {
                if(this.ids.length==1){
                    this.editModal=true;
                    fetch({
                        url:'/system/dept/all',
                        method: 'get'
                    }).then((resp)=>{
                        this.deptList=resp.data;
                        //将自己部门从修改界面的父部门列表中删除
                        for(let i=0;i<this.deptList.length;i++){
                            if(this.editForm.id==this.deptList[i].id){
                                this.deptList.splice(i,1);
                            }
                        }
                    });
                }
                else if(this.ids.length>1){
                    this.$Message.warning('只能对1个部门进行修改!');
                }
                else{
                    this.$Message.warning('请至少选择1个部门进行修改!');
                }
            },

            editDept:function () {
                this.$refs['editForm'].validate((valid)=>{
                    if(valid){
                        //alert('数据校验通过,即将新增...');
                        fetch({
                            url:'/system/dept',
                            method:'post',
                            data:this.editForm
                        }).then((resp)=>{
                            if(resp.data=='1'){
                                this.$Message.success('编辑部门成功!');
                                //新建部门成功后,要重新获取最新的分页数据
                                this.gopage(this.pageNo);
                                //手动关闭新增对话框
                                this.editModal=false;
                            }
                            else{
                                this.$Message.error('编辑部门失败!');
                            }
                        });
                    }
                    else{
                        //用iView的提示框报错
                        this.$Message.error('表单校验失败!');

                        setTimeout(()=>{
                            this.loading=false;  //不要加载了

                            //当dom刷新后,让loading重新变为true, 再给我显示出来
                            this.$nextTick(()=>{
                                this.loading=true;
                            });
                        },2000);
                    }
                });
            },

            //(批量)删除部门
            deleteDept:function () {
                if(this.ids.length>0){
                    if(confirm('真的要删除所选部门?')){
                        fetch({
                            url:'/system/dept',
                            method:'delete',
                            data:this.ids
                        }).then((resp)=>{
                            if(resp.data=='1'){
                                this.$Message.success('删除成功!');
                                this.gopage(this.pageNo);
                            }
                            else{
                                this.$Message.error('删除失败!');
                            }
                        });
                    }
                }
                else{
                    this.$Message.error('请选中需要删除的部门!');
                }
            }
        },
        mounted () {
            //网页一加载完毕,就要显示"第1页"的部门集合-->Table
            this.gopage(1);
        }
    };
</script>

<style type="text/css">

</style>
